<template>
    <div>
        <el-container>
        <el-header>
            <span class="left">图片列表</span>
            <div style="float:right;">
              <!-- <el-button @click="tests">111</el-button> -->
            <el-button class="header_right" @click="$router.go(-1)">返回</el-button>
            <el-button class="header_right" id="sc"  @click="dialogFormVisible2=true; brandForm2={}; imageUrl=''">上传图片</el-button>
              <el-select  class="header_right" v-model="value" placeholder="请选择" @change="selectChange">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                >
                </el-option>
            </el-select>
            </div>
        </el-header>
        <el-main>
            <el-row>
            <el-col :span="wide" v-for="(o, index) in tableData" :key="index" id="el" class="s4">
                <el-card :body-style="{ padding: '0px' }">
                <img :src="o" class="image">
                <div style="padding: 14px;">
                    <div style="margin-bottom:10px;">
                      <el-checkbox-group v-model="checkList" style="float:left;margin-left:-10px;width:10px;">
                        <el-checkbox @change="boolChange" :label="o" :key="index"><span></span></el-checkbox>
                      </el-checkbox-group>
                    <el-button size="mini" type="text" class="button" @click="del(o)">删除图片</el-button>
                    <el-button size="mini" type="text" class="button" @click="upd(o)">转移相册</el-button>
                    </div>
                </div>
                </el-card>
            </el-col>
        </el-row>
        </el-main>
        <el-footer>
            <div>
            <el-checkbox id="qx" style="float:left;margin-top:10px;"  @change="handleCheckAllChange">全选</el-checkbox>
              <el-select  v-model="value2" placeholder="请选择" style="float:left;margin-left:25px;" @change="selectChange2">
                <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    >
                    </el-option>
                </el-select>
                <el-button style="float:left;margin-left:15px;" type="primary" @click="batchs">确定</el-button>
            <el-pagination
                style="padding-top:10px;"
                class="header_right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizeList"
                :page-size="pageSize"
                layout="total, prev, pager, next, jumper"
                :total="total"
                ></el-pagination>
            </div>
        </el-footer>
        </el-container>

    <el-dialog title="转移相册" :visible.sync="dialogFormVisible">
      <el-form :model="brandForm">
        <el-form-item label="相册名称" :label-width="formLabelWidth">
              <el-select  v-model="value3" placeholder="请选择" style="float:left;margin-left:25px;">
                <el-option
                    v-for="item in titleList"
                    :key="item"
                    :label="item"
                    :value="item"
                    >
                    </el-option>
                </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false; brandForm={};value3=''">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

      <el-dialog title="添加图片" :visible.sync="dialogFormVisible2">
        <el-form :model="brandForm2">
          <el-form-item label="选择图片:" :label-width="formLabelWidth">
              <el-upload
              class="avatar-uploader"
              :action="'http://localhost:88/api/oss/upload/oss?folder=myimages&classify=' + this.title"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" style="height:100px;"/>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false; brandForm2={};imageUrl=''">取 消</el-button>
          <el-button type="primary" @click="save2">确 定</el-button>
        </div>
    </el-dialog>

      <el-dialog title="贤" :visible.sync="dialogFormVisible3" :before-close="dc">
        <div>
          <div style="border-bottom:1px solid black;padding-bottom:50px;">
            <span style="float:left;">商品图库 > {{xian}}</span>
            <el-select  v-model="valueX" placeholder="请选择" style="float:right;margin-top:-10px;" @change="xianChange">
                <el-option
                    v-for="item in titleList2"
                    :key="item"
                    :label="item"
                    :value="item"
                    >
                    </el-option>
                </el-select>
          </div>
              <div style="border-bottom:1px solid black;padding-bottom:15px;">
                      <el-row>
                      <el-col :span="widths" v-for="(o, index) in tableData2" :key="index"  class="s51">
                          <el-card :body-style="{ padding: '0px' }">
                                <el-checkbox-group v-model="checkList2" style="float:left;" @change="zhangq">
                                  <el-checkbox :label="o.url" :key="index"><span> </span></el-checkbox>
                                </el-checkbox-group>
                          <img :src="o.url" class="image" style="float:left;">
                          </el-card>
                      </el-col>
                  </el-row>
              </div>
            <el-pagination
                class="header_right"
                @current-change="handleCurrentChange2"
                :current-page="currentPage2"
                :page-size="10"
                layout="prev, pager, next, jumper"
                :total="total2"
                ></el-pagination>
          </div>
          <div slot="footer" class="dialog-footer">
            <span style="float:left;">已选中{{zhang}}</span>
            <el-button @click="dialogFormVisible3 = false;valueX='';xian='全部图片';checkList2=[];zhang=0">取 消</el-button>
            <el-button type="primary" @click="save3">确 定</el-button>
          </div>
    </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
      return {
        currentPage2: 1,
        total2: 0,
        zhang: 0,
        valueX: '',
        xian: '全部图片',
        widths: 3,
        dialogFormVisible3: false,
        formLabelWidth: '150px',
        checkList: [],
        checkList2: [],
        title: '',
        dialogFormVisible2: false,
        brandForm: {},
        brandForm2: {},
        options2: [
          {
          value: 1,
          label: '转移相册'
          },
          {
          value: 2,
          label: '删除图片'
          }
        ],
        options: [{
          value: '5',
          label: '单行/3张'
        },
        {
          value: '4',
          label: '单行/4张'
        }, {
          value: '3',
          label: '单行/5张'
        }, {
          value: '2',
          label: '单行/6张'
        }],
        value: '4',
        value2: '',
        value3: '',
        wide: 4,
        dialogFormVisible: false,
        tableData: [],
        tableData2: [],
        total: 0,
        currentPage: 1,
        pageSize: 16,
        pageSizeList: [12, 16, 20, 24],
        imageUrl: '',
        bool: true,
        titleList: [],
        titleList2: ['全部图片']
      }
    },
    methods: {
    async handleCurrentChange2(val) {
      this.currentPage2 = val;
      this.xianChange();
    },
      dc() {
          this.zhang = 0
          this.dialogFormVisible3 = false
          this.checkList2 = []
      },
      zhangq() {
          this.zhang = this.checkList2.length
      },
      save3() {
          if (this.checkList2.length === 0) {
          this.$message('未选择图片!');
          return null;
          }
          console.log(this.checkList2)
          this.checkList2 = []
      },
      async getXianTitle() {
            const { data: res2 } = await this.$http.get(`goods/album/findAll`)
            res2.data.forEach(element => {
              this.titleList2.push(element.title)
            });
      },
      async xianChange() {
        this.xian = this.valueX
        this.tableData2 = []
          var form = {}
          form.title = this.valueX
            if (this.valueX === '全部图片') {
              form.title = ''
            }
            const { data: res } = await this.$http.post(
            `goods/album/findImagesList?pageNo=${this.currentPage2}`, form);
            this.total2 = res.data.total
            res.data.rows.forEach(element => {
              this.tableData2.push(JSON.parse(element))
            });
      },
      async tests() {
        this.dialogFormVisible3 = true
        this.tableData2 = []
          var form = {}
          form.title = this.valueX
            if (this.valueX === '全部图片') {
              form.title = ''
            }
            const { data: res } = await this.$http.post(
            `goods/album/findImagesList?pageNo=${this.currentPage2}`, form);
            console.log(res)
            this.total2 = res.data.total
            res.data.rows.forEach(element => {
              this.tableData2.push(JSON.parse(element))
            });
      },
      async del(o) {
        this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
       })
        .then(async () => {
          // const str = row.image.split("/")
          // console.log(str[2])
          // if (str[2] === 'w-xian.oss-cn-hangzhou.aliyuncs.com') {
          //   console.log(row.image)
          //   this.$http.post(`http://localhost:84/api/oss/upload/ossDelete?fileName=${row.image}`)
          // }
        console.log(o)
        this.brandForm2.images = [o]
        this.brandForm2.title = this.title
        const { data: res } = await this.$http.post(
          `goods/album/delete2`,
          this.brandForm2
        );
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.brandForm2 = {}
          this.getList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      },
      async upd(o) {
        this.brandForm = {}
        this.value3 = ''
        this.checkList = []
        this.dialogFormVisible = true
        this.checkList.push(o)
      },
      async getList() {
            this.tableData = []
            var titles = { title: this.title }
            const { data: res } = await this.$http.post(
            `goods/album/findTitle/${this.currentPage}/${this.pageSize}`, titles);
            if (res.data.imageItems === null || res.data.imageItems === '' || res.data.imageItems === '(NULL)') {
              return null;
            }
            var ii = JSON.parse(res.data.imageItems)
            ii.forEach(element => {
              this.tableData.push(element.url)
            });
            this.tableData = this.tableData.sort()
            this.total = this.tableData.length
            console.log(this.total)
            const { data: res2 } = await this.$http.get(`goods/album/findAll`)
            this.titleList = []
            res2.data.forEach(element => {
              if (element.title !== this.title) {
              this.titleList.push(element.title)
              }
            });
      },
      async del2() {
        this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
       })
        .then(async () => {
        this.brandForm2.images = this.checkList
        this.brandForm2.title = this.title
        const { data: res } = await this.$http.post(
          `goods/album/batchDel`,
          this.brandForm2
        );
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.brandForm2 = {}
          this.boolChange()
          this.getList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      },
      batchs() {
        if (this.checkList.length === 0) {
          this.$message('请选择要操作的图片');
          return null;
        }
        if (this.value2 !== 1 && this.value2 !== 2) {
          this.$message('请选择要进行的操作');
          return null;
        }
          if (this.value2 === 1) {
            console.log(this.checkList)
              // console.log('改相册')
          }
          if (this.value2 === 2) {
            console.log(this.checkList)
              // console.log('删除')
              this.del2()
          }
      },
      boolChange() {
        if (this.checkList.length === 0) {
          document.getElementById("qx").getElementsByTagName("span")[0].classList.remove("is-checked")
          this.bool = true
        } else {
        if (this.checkList.sort().toString() === this.tableData.sort().toString()) {
         document.getElementById("qx").getElementsByTagName("span")[0].classList.add("is-checked")
          this.bool = false
        } else {
          document.getElementById("qx").getElementsByTagName("span")[0].classList.remove("is-checked")
          this.bool = true
        }
        }
      },
      selectChange () {
          //  alert(this.value)
           this.wide = Number.parseInt(this.value)
           document.getElementById("el").classList.add("s4")
           if (this.wide === 5) {
              document.getElementById("el").classList.remove("s4")
              document.getElementById("el").classList.remove("s5")
              document.getElementById("el").classList.remove("s6")
              document.getElementById("el").classList.add("s3")
           }
           if (this.wide === 3) {
              document.getElementById("el").classList.remove("s4")
              document.getElementById("el").classList.remove("s3")
              document.getElementById("el").classList.remove("s6")
              document.getElementById("el").classList.add("s5")
           }
           if (this.wide === 4) {
              document.getElementById("el").classList.remove("s3")
              document.getElementById("el").classList.remove("s5")
              document.getElementById("el").classList.remove("s6")
              document.getElementById("el").classList.add("s4")
           }
           if (this.wide === 2) {
              document.getElementById("el").classList.remove("s4")
              document.getElementById("el").classList.remove("s5")
              document.getElementById("el").classList.remove("s3")
              document.getElementById("el").classList.add("s6")
           }
      },
      selectChange2 () {
      },
      handleCheckAllChange() {
        if (this.bool) {
        this.checkList = this.tableData
         document.getElementById("qx").getElementsByTagName("span")[0].classList.add("is-checked")
          this.bool = false
        } else {
          this.checkList = []
          document.getElementById("qx").getElementsByTagName("span")[0].classList.remove("is-checked")
          this.bool = true
        }
      },
    async handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    async handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    async save() {
        if (this.value3 === '') {
          this.$message('请选择要操作的相册');
          return null
        }
      this.brandForm.title1 = this.title
      this.brandForm.title2 = this.value3
      this.brandForm.value = this.checkList
      this.dialogFormVisible = false;
      const { data: res } = await this.$http.post(
        `goods/album/update3`,
        this.brandForm
      );
      if (res.code === 200) {
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        this.getList();
      }
    },
    async save2() {
        if (this.imageUrl === '') {
          this.$message('请选择要添加的图片');
          return null;
        }
      this.brandForm2.image = this.imageUrl
      this.brandForm2.title = this.title
      this.dialogFormVisible2 = false;
      console.log(this.brandForm2)
      const { data: res } = await this.$http.post(
        `goods/album/update2`,
        this.brandForm2
      );
      if (res.code === 200) {
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        this.getList();
      }
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = file.response;
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    dateMinus(data1, date2) {
            var s1 = data1.getTime()
            var s2 = date2.getTime()
            var total = (s2 - s1) / 1000
            var day = parseInt(total / (24 * 60 * 60))
            var afterDay = total - day * 24 * 60 * 60
            console.log(afterDay)
            var hour = parseInt(afterDay / (60 * 60))
            var afterHour = total - day * 24 * 60 * 60 - hour * 60 * 60
            console.log(afterHour)
            var min = parseInt(afterHour / 60)
            var afterMin = total - day * 24 * 60 * 60 - hour * 60 * 60 - min * 60
            return afterMin
        }
    },
    created() {
        this.title = this.$route.query.title
        this.wide = Number.parseInt(this.value)
        this.getList()
      this.getXianTitle()
    },
    mounted() {
    }
}
</script>

<style scoped>
.el-header {
  background-color: rgba(228, 228, 228, 1);
  color: #333;
  text-align: center;
  line-height: 60px;
}
.left {
  float: left;
}
.header_right {
  margin-left: 15px;
}
.bottom {
    margin-top: 13px;
    line-height: 12px;
}
.button {
    padding: 0;
    float: right;
}
.image {
    width: 100%;
    display: block;
    height: 75px;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: ""
}
.clearfix:after {
    clear: both
}
.s3{
  margin-left: 100px;
  margin-top: 15px;
}
.s4{
  margin-left: 75px;
  margin-top: 15px;
}
.s5{
  margin-left: 50px;
  margin-top: 15px;
}
.s51{
  margin-left: 37px;
  margin-top: 15px;
}
.s6{
  margin-left: 25px;
  margin-top: 15px;
}
</style>
